<template>
  <mu-flex direction="column" style="height: 100%; background-color: #fff;">
    <!--顶部-->
    <MainHeader/>
    <!--寝室费用情况-->
    <mu-row class="full">
      <mu-col span="6">
        <div class="cost-box right-dashed bottom-dashed">
          <b>￥10.0元</b>
          <h4>电费</h4>
        </div>
      </mu-col>
      <mu-col span="6">
        <div class="cost-box bottom-dashed">
          <b>￥10.0元</b>
          <h4>空调费</h4>
        </div>
      </mu-col>
      <mu-col span="12">
        <div class="cost-time bottom-dashed">
          时间段：2019-04-20至2019-05-14
        </div>
      </mu-col>
    </mu-row>

    <!--功能区-->
    <mu-row class="full">
      <mu-col span="4">
        <mu-button to="/doadvise" flat class="menu-btn bottom-dashed right-dashed">
          <mu-flex justify-content="center" align-items="center" direction="column">
            <mu-icon value="email" color="#289b57"/>
            <span class="text-grey">意见建议</span>
          </mu-flex>
        </mu-button>
      </mu-col>
      <mu-col span="4">
        <mu-button to="/dorepairs" flat class="menu-btn bottom-dashed">
          <mu-flex justify-content="center" align-items="center" direction="column">
            <mu-icon value="build" color="#009688"/>
            <span class="text-grey">故障报修</span>
          </mu-flex>
        </mu-button>
      </mu-col>
      <mu-col span="4">
        <mu-button to="/resquare" flat class="menu-btn bottom-dashed left-dashed">
          <mu-flex justify-content="center" align-items="center" direction="column">
            <mu-icon value="explore" color="#2869b1"/>
            <span class="text-grey">报修广场</span>
          </mu-flex>
        </mu-button>
      </mu-col>
    </mu-row>

    <!--公告区-->
    <mu-row fill class="full" ref="container">
      <div class="notice-box">
        <div class="empty" v-if="sysNotices.length <= 0">
          暂无公告
        </div>
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list style="overflow:hidden;">
            <template v-for="(nt, i) in sysNotices">
              <mu-paper :z-depth="2" style="margin-bottom: 5px">
                <mu-list-item avatar class="list-item">
                  <mu-list-item-action @click="changeNoticeDetailsShow(i)">
                    <mu-avatar color="yellow800">
                      <mu-icon value="insert_chart"></mu-icon>
                    </mu-avatar>
                  </mu-list-item-action>
                  <mu-list-item-content>
                    <mu-list-item-title>{{nt.title}}</mu-list-item-title>
                    <mu-list-item-sub-title>{{nt.content}}</mu-list-item-sub-title>
                  </mu-list-item-content>
                  <mu-list-item-action style="width: 82px; padding: 0;">
                    <!--<mu-list-item-after-text>
                      <mu-flex align-items="center">
                        <span>100</span>
                        <mu-icon value="remove_red_eye" class="eye"/>
                      </mu-flex>
                    </mu-list-item-after-text>-->
                    <mu-list-item-after-text>{{nt.startTime.substr(11)}}</mu-list-item-after-text>
                    <mu-list-item-after-text>{{nt.startTime.substr(0, 10)}}</mu-list-item-after-text>
                  </mu-list-item-action>
                </mu-list-item>
              </mu-paper>
            </template>
          </mu-list>
        </mu-load-more>
      </div>
    </mu-row>

    <!--公告详情查看弹框-->
    <mu-dialog :title="notice.title" :open.sync="noticeDetailsShow" width="95%">
      <div slot="default">{{notice.content}}</div>
      <mu-flex fill slot="actions" justify-content="between" align-items="center">
        <span class="font12" style="padding-left: 16px;">{{notice.startTime}}</span>
        <mu-button small flat color="teal" @click="changeNoticeDetailsShow()">关闭</mu-button>
      </mu-flex>
    </mu-dialog>
  </mu-flex>
</template>

<script>
  import MainHeader from './MainHeader'
  import {mapActions, mapState} from 'vuex'

  export default {
    name: 'home',
    components: {
      MainHeader
    },
    computed: {
      ...mapState(['sysNotices'])
    },
    data() {
      return {
        refreshing: false,
        loading: false,
        notice: {},
        noticeDetailsShow: false,
        page: 1
      }
    },
    methods: {
      ...mapActions(['loadNotice']),
      changeNoticeDetailsShow(index) {
        if (index != null) {
          this.notice = this.sysNotices[index]
        }
        this.noticeDetailsShow = !this.noticeDetailsShow
      },
      refresh() {
        let self = this;
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        this.loadNotice(1).then(() => {
          self.refreshing = false
        })
      },
      load() {
        let self = this;
        this.loading = true;
        this.loadNotice(++this.page).then(() => {
          self.loading = false
        })
      }
    }
  }
</script>

<style scoped>
  .cost-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 95px;
  }

  .cost-box b {
    letter-spacing: 1.5px;
    font-size: 16px;
  }

  .cost-box h4 {
    font-size: 18px;
    margin: 0;
    color: #009688;
  }

  .cost-time {
    height: 24px;
    font-size: 11px;
    color: #009688;
    text-align: center;
    padding-top: 4px;
  }

  .menu-btn {
    width: 100%;
    height: unset;
    line-height: unset;
    border-radius: unset;
    padding: 11px 0 7px;
  }

  .text-grey {
    margin-top: 2px;
    color: #999999;
    font-size: 13px;
  }

  .notice-box {
    width: 100%;
    height: calc(100vh - 302px);
    overflow: auto;
    padding: 0 2px;
  }

  .eye {
    font-size: 15px;
    padding-left: 3px;
  }

  .list-item {
    padding: 8px 0;
  }
</style>
